import React, { PureComponent } from 'react';
import { Chart, Geom, Axis, Tooltip, Label } from 'bizcharts';
import { DatePicker } from 'antd';
import numeral from 'numeral';
import moment from 'moment';
import style from './index.less';

class AppTotalUsers extends PureComponent {
  numeralCount = count => numeral(count).format('0,0.00');

  wanCount = count => {
    let data;
    if (count < 10000) {
      data = count;
    } else {
      data = this.numeralCount(count / 10000);
      data = `${data} 万`;
    }
    return data;
  };

  handleSelect = value => {
    const { callback } = this.props;
    const payload = { showDate: value };
    callback(payload);
  };

  // Can not select days before today and today
  disabledDate = current => current && current > moment().endOf('day');

  render() {
    const { appChartData, showDate } = this.props;
    const background = {
      fill: '#FFFFFF', // 图表背景色-白色
      fillOpacity: 0, // 图表背景透明度
    };

    const appScale = {
      y: {
        alias: '人数',
        type: 'pow',
      },
    };

    return (
      <div style={{ height: 390 }}>
        <div style={{ padding: '20px', background: '#FFFFFF' }}>
          <Chart height={300} data={appChartData} scale={appScale} forceFit background={background}>
            <span className={style.mainTitle}>历史累计用户数(人)</span>
            <DatePicker
              className={style.dateSelect}
              allowClear={false}
              onChange={this.handleSelect}
              disabledDate={this.disabledDate}
              // value={moment(appChartData[0] && appChartData[0].date, 'YYYY-MM-DD')}
              value={moment(showDate, 'YYYY-MM-DD')}
            />
            <Axis name="x" />
            <Axis name="y" visible={false} />
            <Tooltip
              crosshairs={{
                type: 'y',
                title: '人数',
              }}
            />
            <Geom type="interval" position="x*y">
              {/* 柱子上作文章用这个子组件 */}
              <Label
                content={['x*y', (x, y) => this.wanCount(`${y}`)]}
                textStyle={{
                  textAlign: 'center', // 文本对齐方向，可取值为： start middle end
                  fill: '#404040', // 文本的颜色
                  fontSize: '12', // 文本大小
                  fontWeight: 'normal', // 文本粗细
                  rotate: 0, // 文字旋转
                  textBaseline: 'top', // 文本基准线，可取 top middle bottom，默认为middle
                }}
              />
            </Geom>
          </Chart>
        </div>
      </div>
    );
  }
}

export default AppTotalUsers;
